<template>
  <div class="m-login-container">
      <el-row class="m-main-header-search">
 <el-button type="success" @click="$router.back()">返回</el-button>
      <el-button type="success" @click="handleOpareteClick(1)">新增</el-button>
     </el-row>
     <div class="m-main-content-body">
    <el-table
      v-loading="loading"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      :inline="false"
      :header-cell-style="{
        'background-color': '#E5EEFF',
      }"
    >
      <el-table-column
        prop="name"
        label="名称"
        :autoFit="true"
        :fitHeader="true"
      >
      </el-table-column>
      <el-table-column
        prop="label"
        label="产品标签"
        :autoFit="true"
        :fitHeader="true"
      ></el-table-column>
      <el-table-column
        prop="num"
        label="数量"
        :autoFit="true"
        :fitHeader="true"
      ></el-table-column>
      <el-table-column
        prop="product_id"
        label="产品id"
        :autoFit="true"
        :fitHeader="true"
      ></el-table-column>
      <el-table-column
        prop="compose_name"
        label="套餐名称"
        :autoFit="true"
        :fitHeader="true"
      ></el-table-column>
      <el-table-column
        prop="priority"
        label="优先级"
        :autoFit="true"
        :fitHeader="true"
      ></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        :autoFit="true"
        :fitHeader="true"
      >
        <template slot-scope="scope">
           <el-button
            class="table-operate-btn"
            @click="handleOpareteClick(2, scope.row)"
            type="text"
            size="small"
          >
            编辑
          </el-button>
          <el-button
            class="table-operate-btn red-btn-text"
            @click="del(scope.row.id)"
            type="text"
            size="small"
          >
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    </div>
    <dialog-set
      v-if="dislogSetVisible"
      @close="dislogSetVisible = false"
      :info="tempInfo"
      :compose_id="id"
      @getList="getList"
    ></dialog-set>
  </div>
</template>

<script>
import DialogSet from "./components/DialogSet";
export default {
  components: {
    DialogSet,
  },
  computed: {
    id() {
      return +this.$route.query.id;
    },
  },
  data() {
    return {
      list: [],
      dislogSetVisible: false,
      tempInfo: {},
      loading: false
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /*
     * @Desc: 获取
     */
    async getList() {
      this.loading = true
      const { data } = await this.$api.compose.composeProductDetail({
        compose_id: this.id,
      });
      const { code, data: info } = data;
      if (code === 200) {
        this.list = info;
      }
      this.loading = false
    },

    /*
     * @Desc: 套餐组详情
     */
    async getComposeGroupDetail() {
      const { data } = await this.$api.compose.composeGroupInfo({
        id: this.group_id,
      });
      const { code, data: info } = data;
      if (code === 200) {
        const {
          name,
          sn,
          compose_num,
          main_product_id,
          b_group_id,
          fb_pixel,
          fb_url,
          line_url,
        } = info;
        this.baseInfo = {
          name,
          sn,
          compose_num,
          main_product_id,
          b_group_id,
          fb_pixel,
          fb_url,
          line_url,
        };
      }
    },

    /*
     * @Desc: 套餐组新增/编辑
     */
    async composeGroupInfoOperate() {
      this.$refs.refBaseInfoForm.validate(async (valid) => {
        if (!valid) return;
        const type = this.group_id ? "update" : "create";
        const params = {
          [type]: {
            ...this.baseInfo,
            id: this.group_id ? +this.group_id : null,
          },
        };
        const { data } = await this.$api.compose.composeGroupOperate(params);
        const { code, data: id } = data;
        if (code !== 200) return this.$message.warning("数据不合法");
        if (!this.group_id) {
          this.$router.push({
            query: {
              ...this.$route.query,
              id,
            },
          });
        }
        this.$message.success("保存成功");
      });
    },

    /*
     * @Desc: 套餐 编辑/新增/删除
     * @params: {String}
     * @return: {Object}
     */
    async handleOpareteClick(type, row = {}) {
      console.log(row)
      this.tempInfo = {
        modalType: type,
        ...row,
        id: row.id
      };
        this.dislogSetVisible = true;
    },

    /*
     * @Desc: 套餐商品编辑/新增
     * @params: {String}
     * @return: {Object}
     */
    async handleOpareteProductClick(type, row = {}) {},

    /**
     * @Desc 数据提交
     * */
    async del(id) {
      this.$delConfirm(null, null, async () => {
        const { data } = await this.$api.compose.composeProductOperate({
          delete: { id },
        });
        console.log(data);
        this.__globalHandleResponseMixin(data, () => {
          this.getList();
          this.$message.success("删除成功");
        });
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
